<template>
    <div class="achievementsBox">
        <div class="achievementsHead">
            <label>教研成果</label>
            <el-button type="text" style="margin-right: 15px;" @click="isAchievements = !isAchievements">{{isAchievements?'退出管理':'管理'}}</el-button>
            <el-checkbox v-model="isAchievementsAll" v-if="isAchievements">全选</el-checkbox>
            <el-button type="text" style="color: #F56C6C;" v-if="isAchievements">删除</el-button>
            <el-button type="primary" size="mini" class="increaseBtn" v-if="!isAchievements" @click="isEdit = true">添 加</el-button>
        </div>

        <ul class="fruitBox">
            <li class="fruitlist" v-for="index in 10" :key="index">
                <div class="leftBox">
                    <el-checkbox v-if="isAchievements"></el-checkbox>
                    <label>家庭作业</label>
                </div>
                <div class="rightBox">
                    <label>2021-12-31</label>
                    <el-button type="primary" plain size="mini" :disabled = "isAchievements"  @click="isEdit = true">编 辑</el-button>
                    <el-button type="danger" plain size="mini">删 除</el-button>
                </div>
            </li>
        </ul>

        <div class="block">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[15, 20, 25, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--修改/添加文章 -->
        <el-dialog
                title="修改文章"
                :visible.sync="isEdit"
                width="800px">
            <el-form ref="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input placeholder="请输入标题" v-model="formTitle" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <WangEditor :catchData="catchData"></WangEditor>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" plain @click="isEdit = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="isEdit = false">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import WangEditor from '@c/wangeditor/wangeditor'
    export default {
        name: "researchAchievements",
        components:{
            WangEditor
        },
        data(){
            return{
                isAchievements:false, // 教研成果 管理
                isAchievementsAll:false, // 教研成果 全选
                page:1, // 分页 当前页
                pageSize:15,// 分页 每页显示条数
                total:200, // 分页 总条数
                editorContent:"",
                formTitle:'',
                isEdit:false,
            }
        },
        methods:{
            // 分页  每页显示多少条
            handleSizeChange(val) {
            },

            // 分页 当前页
            handleCurrentChange(val) {
            },
            // 富文本
            catchData(edit){
                this.editorContent = edit
            }
        }
    }
</script>

<style lang="scss" scoped>
    .achievementsBox{
        width: 100%;
        .achievementsHead{
            text-align: left;
            position: relative;

            &>label{
                color: #303133;
                margin-right: 15px;
                font-size: 16px;
            }

            .increaseBtn{
                position: absolute;
                top: 8px;
                right: 0;
            }
        }
        .fruitBox{
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
            .fruitlist{
                border-bottom: 1px solid #EBEEF5;
                height: 50px;
                line-height: 50px;

                .leftBox{
                    float: left;
                    font-size: 14px;
                    color: #303133;
                    label:first-of-type{
                        margin-right: 10px;
                    }
                }
                .rightBox{
                    float: right;
                    font-size: 14px;
                    color: #909399;
                    label{
                        margin-right: 15px;
                    }
                }
            }
        }

        .block{
            padding: 15px 0;
        }
    }
</style>
